<template>
  <el-dialog v-model="visible" title="审核" width="50%">
    <el-descriptions :column="2" border>
      <el-descriptions-item label="单位名称">{{ form.unitName }}</el-descriptions-item>
      <el-descriptions-item label="联系人姓名">{{ form.contactName }}</el-descriptions-item>
      <el-descriptions-item label="联系人电话">{{ form.contactPhone }}</el-descriptions-item>
      <el-descriptions-item label="单位地址">{{ form.unitAddress }}</el-descriptions-item>
      <el-descriptions-item label="统一社会信用代码">{{ form.creditCode }}</el-descriptions-item>
      <el-descriptions-item label="注册时间">{{form.registrationTime}}</el-descriptions-item>
      <el-descriptions-item label="注册资金(万)">
        <span>{{ form.registeredCapital }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="营业执照">
        <el-image
            v-if="form.businessLicense"
            :src="imgSrc(form.businessLicense)"
            fit="cover"
            style="width: 100px; height: 100px;"
            @click="previewImage(form.businessLicense)"
        />
      </el-descriptions-item>
      <el-descriptions-item label="入会申请表">
        <el-button v-if="form.applicationForm" type="primary" size="small" @click="download(form.applicationForm)">下载</el-button>
      </el-descriptions-item>
      <el-descriptions-item label="发票">
        <el-button v-if="form.invoice" type="primary" size="small" @click="download(form.invoice)">下载</el-button>
      </el-descriptions-item>
    </el-descriptions>

    <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
    >
      <!-- 审核操作按钮组 -->
      <el-form-item label="审核是否通过" prop="status">
        <el-radio-group v-model="ruleForm.status" size="large">
          <el-radio-button label="通过" :value="3" />
          <el-radio-button label="拒绝" :value="2" />
        </el-radio-group>
      </el-form-item>

      <!-- 拒绝原因输入框 -->
      <div v-if="ruleForm.status === 2">
        <el-form-item label="拒绝原因" prop="apprResult">
          <el-input
              v-model="ruleForm.apprResult"
              type="textarea"
              placeholder="请输入拒绝原因"
              :rows="3"
          />
        </el-form-item>
      </div>

    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {ref, reactive, computed, useTemplateRef} from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {downLoadFile} from '../api/common/common'
import BsApply from '../api/guild/bsApply'

const visible = ref(false);
const form = reactive({
  id: "",
  unitName: "",
  contactName: "",
  contactPhone: "",
  unitAddress: "",
  creditCode: "",
  registrationTime: null,
  registeredCapital: null,
  businessLicense: "",
  applicationForm: "",
  invoice: "",
});

const emit = defineEmits(["refresh"]);

//表单相关
const ruleForm = reactive({
  id: '',
  status: 3,
  apprResult:null,
})
const rules = reactive({
  status: [
    { required: true, message: "请选择审核状态", trigger: "change" },
  ],
  apprResult:[
    { required: true, message: "请输入拒绝原因", trigger: "change" },
  ]
});


// 是否通过审核
const isApproved = ref(null);

// 拒绝原因
const rejectReason = ref("");

// 图片预览
function previewImage(imageUrl: string) {
  imageUrl = (imageUrl.startsWith("http://") || imageUrl.startsWith("https://"))
      ? imageUrl
      : "/api/common/download/" + imageUrl;
  ElMessageBox.alert(
      `<img src="${imageUrl}" style="max-width: 100%; max-height: 400px;" />`,
      "图片预览",
      {
        dangerouslyUseHTMLString: true,
        showConfirmButton: false,
        showCancelButton: true,
        cancelButtonText: "关闭",
      }
  );
}
//下载指定路径的文件
function download(path) {
  downLoadFile(path)
}


let imgSrc = computed(() => {
  return (v: string) => {
    // 判断是否 http/https 开头
    if (v.startsWith('http://') || v.startsWith('https://')) {
      return v;
    }
    return v ? '/api/common/download/' + v : '';
  };
});


// 提交审核结果
const ruleFormRef = useTemplateRef('ruleFormRef')
async function handleSubmit() {
  //表单校验
  try {
    await ruleFormRef.value.validate();
    await ElMessageBox.confirm('确定提交审核吗?', {title: '提示',})
    //提交审核
    let result = await BsApply.audit(ruleForm)
    let {code,data} = result.data;
    if (code === 200) {
      ElMessage({ message: data, type: "success" });
      visible.value = false;
      resetForm();
      emit('refresh')
    } else {
      ElMessage({ message: data, type: "warning" });
    }
  } catch (e) {
    console.log('e',e)
  }
}

// 取消操作
function handleCancel() {
  visible.value = false;
  resetForm();
}

// 重置表单
function resetForm() {
  Object.assign(form, {
    id: "",
    unitName: "",
    contactName: "",
    contactPhone: "",
    unitAddress: "",
    creditCode: "",
    registrationTime: null,
    registeredCapital: null,
    businessLicense: "",
    applicationForm: "",
    invoice: "",
  });
  isApproved.value = null;
  rejectReason.value = "";
}

// 打开审核对话框
function open(row: any) {
  Object.assign(form, row);
  ruleForm.id = row.id;
  // ruleForm.status = row.status;
  ruleForm.apprResult = row.apprResult;
  visible.value = true;
}

defineExpose({
  open,
});
</script>

<style  scoped>
.el-descriptions {
  margin-bottom: 20px;
}
.dialog-footer {
  text-align: right;
}
.audit-actions {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}
</style>
